<template>
    <div class="total-charts-wrapper">
        <div class="total-charts-top">
            <div class="charts-one">
                表一
            </div>
            <div class="charts-two">
                表二
            </div>
        </div>
        <div class="total-charts-center">
            <div class="charts-three">
                表三
            </div>
            <div class="charts-four">
                表四
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "totalCharts"
    }
</script>

<style scoped lang="scss">
    .total-charts-wrapper{
        display: flex;
        width: 100%;
        height: 7rem;
        flex-flow: column nowrap;
        .total-charts-top{
            flex: 1;
            display: flex;
            .charts-one{
                width: 50%;
            }
            .charts-two{
                width: 50%;
            }
        }
        .total-charts-center{
            flex: 1;
            display: flex;
            .charts-three{
                width: 50%;
            }
            .charts-four{
                width: 50%;
            }
        }
    }
</style>
